<template>
  <div class="bar-chart-container" :style="styleData">
    <div class="bar-chart-title">{{ title }}</div>
    <div :id="id" :style="{ width: '98%', height: '90%' }"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
interface PropsTypes {
  id: string;
  title: string;
  listData: [];
  styleData: object;
}
const props = withDefaults(defineProps<PropsTypes>(), {
  id: "",
  title: "",
  listData: [],
  styleData: {}
});
onMounted(() => {
  console.log(props, "props");
  initChart();
});
const bgColor = "#fff";
const textColor = "#8A8A8A";
const yMax = ref<number>(Math.max(...props.listData.yData));
const chartColorArr = [
  "#c065e7",
  "#765deb",
  "#3862d8",
  "#6a89E2",
  "#219CF9",
  "#6efbbf",
  "#40c057",
  "#ffd351",
  "#ff8e43",
  "#f56b6d"
];
// 随机获取指定范围的一个数字 [1, 5]
function randomAtoB(start: number, end: number) {
  return Math.floor(Math.random() * (end + 1 - start) + start);
}
function initChart() {
  const pieChart = document.getElementById(props.id);
  const chart = echarts.init(pieChart);
  chart.setOption({
    // backgroundColor: "#323a5e",
    backgroundColor: bgColor,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "14%",
      top: "16%",
      containLabel: true
    },
    // legend: {
    //   data: ["1", "2", "3"],
    //   right: 10,
    //   top: 12,
    //   textStyle: {
    //     color: textColor
    //   },
    //   itemWidth: 12,
    //   itemHeight: 10
    //   // itemGap: 35
    // },
    xAxis: {
      type: "category",
      // type: "value",
      // data: ["2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019"],
      data: props.listData.xData,
      axisLine: {
        // x轴线
        lineStyle: {
          color: "#000"
        }
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        textStyle: {
          fontFamily: "Microsoft YaHei"
        }
      }
    },
    yAxis: {
      type: "value",
      // type: "category",
      max: yMax.value,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#000"
        }
      },
      // 参考线
      splitLine: {
        show: true,
        // show: false,
        lineStyle: {
          // color: "rgba(255,255,255,0.1)"
          color: "#ccc"
        }
      },
      axisLabel: {}
    },
    // 缩放条
    dataZoom: [
      {
        show: true,
        height: 12,
        xAxisIndex: [0],
        bottom: "8%",
        start: 10,
        end: 90,
        handleIcon:
          "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
        handleSize: "110%",
        handleStyle: {
          color: "#d3dee5"
        },
        textStyle: {
          color: textColor
        },
        borderColor: "#90979c"
      },
      {
        type: "inside",
        show: true,
        height: 15,
        start: 1,
        end: 35
      }
    ],
    series: [
      {
        name: "1",
        type: "bar",
        barWidth: "35%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                // color: "#fccb05"
                color: chartColorArr[randomAtoB(0, 9)]
              },
              {
                offset: 1,
                // color: "#f5804d"
                color: chartColorArr[randomAtoB(0, 9)]
              }
            ]),
            barBorderRadius: 12
          }
        },
        // data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
        data: props.listData.yData
      }
    ]
  });
}
</script>

<style lang="less" scoped>
.bar-chart-container {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px 15px;
  margin-bottom: 8px;
  align-items: flex-start;
  flex-direction: column;

  .bar-chart-title {
    font-size: 13px;
    color: #666;
    font-weight: 700;
  }
}
</style>
